<script setup>
import { ref } from 'vue';
let showInput = ref(false)
const inputCookieStr = ref('');
const isCookieKey = (cookieKey) => {
  const arr = document.cookie.split(';');
  for (let i = 0; i < arr.length; i++) {
    const arr2 = arr[i].split('=');
    if (arr2[0].trim() === cookieKey) {
      return true;
    }
  }
  return false;
}

const styleObject = reactive({
  backgroundImage: `url(${import.meta.env.VITE_APP_ICON})`
})

const setCookit = () => {
  if (!inputCookieStr.value) {
    alert('请输入要设置的cookie键值');
    return
  }
  const cookieStr = inputCookieStr.value;
  let needRefresh = false;
  const arr = cookieStr.replaceAll(' ', '').replaceAll('\n', '').split(';');
  for (let i = 0; i < arr.length; i++) {
    const key = arr[i].split('=')[0];
    if (!isCookieKey(key)) {
      document.cookie = arr[i];
      needRefresh = true;
    }
  }

  if (needRefresh) {
    window.location.reload();
  }
}

const toggleOpen = () => {
  showInput.value = !showInput.value
}
</script>

<template>
  <div class="pop-con" v-show="showInput">
    <textarea type="text" class="user-input" v-model="inputCookieStr" placeholder="在此粘贴抓包获取的cookie 键值对字符串"></textarea>
    <div class="submit-btn" @click="setCookit">设置</div>
  </div>
  <div class="open-btn" :style="styleObject" @click="toggleOpen"></div>
</template>

<style scoped>
.open-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2001;
  cursor: pointer;
  background-size: contain;
}
.pop-con {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .6);
}

.user-input {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 50vh;
  display: block;
  border: none;
  border-radius: 10px;
  font-size: 18px;
}

.user-input:focus {
  outline: none;
}
.submit-btn {
  margin-top: 20px;
  width: 100px;
  height: 40px;
  border-radius: 10px;
  background-color: #409eff;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  float: right;
}
</style>
